<!--
  This file is a part of the open-eBackup project.
  This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  If a copy of the MPL was not distributed with this file, You can obtain one at
  http://mozilla.org/MPL/2.0/.
  
  Copyright (c) [2024] Huawei Technologies Co.,Ltd.
  
  THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
  MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
  -->

<div class="list-container">
    <lv-datatable [lvData]="tableData" (lvSortChange)="sortChange($event)" [lvPaginator]="page" class="aui-table-group"
         lvSort #lvTable lvAsync>
        <thead>
            <tr>
                <ng-container *ngFor="let col of columns">
                    <th *ngIf="!col.isHidden" lvCellKey="{{ col.key }}" lvShowCustom [lvShowSort]="col.showSort">
                        {{ col.label}}
                        <div lvCustom *ngIf="col.key === 'sla_name'">
                            <i lv-icon="lv-icon-search" [lvColorState]="true" [ngClass]="{ active: !!slaName }"
                                lv-popover [lvPopoverContent]="slaNameTpl" lvPopoverTheme="light"
                                lvPopoverPosition="bottom" lvPopoverTrigger="click" #slaNamePopover="lvPopover"></i>
                        </div>
                    </th>
                </ng-container>
                <th>
                    {{'common_operation_label' | i18n}}
                </th>
            </tr>
        </thead>
        <tbody>
            <ng-container *ngFor="let item of lvTable.renderData;trackBy: trackById">
                <tr>
                    <ng-container *ngFor="let col of columns">
                        <ng-container *ngIf="!col.isHidden">
                            <ng-container [ngSwitch]="col.key">
                                <td>
                                    <ng-container *ngSwitchCase="'name'">
                                        <span lv-overflow
                                            [ngClass]="{'aui-link': getNameLink(item),'aui-link-disabled': !getNameLink(item)}"
                                            id='outerClosable' (click)="getResourceDetail(item)">
                                            {{ item.name }}
                                        </span>
                                    </ng-container>
                                    <ng-container *ngSwitchCase="'sub_type'">
                                        <span
                                            *ngIf="[dataMap.Resource_Type.FusionCompute.value, dataMap.Resource_Type.fusionOne.value].includes(item.sub_type) &&
                                                   [dataMap.Resource_Type.fusionComputeVirtualMachine.value,
                                                    dataMap.Resource_Type.fusionComputeCNA.value,
                                                    dataMap.Resource_Type.fusionComputeCluster.value,
                                                    dataMap.Resource_Type.fusionComputePlatform.value].includes(item.type) else normalType"
                                            lv-overflow>
                                            {{ item.type | textMap: 'specialResourceType' }}
                                        </span>
                                        <ng-template #normalType>
                                            {{ item.resourceType | textMap: 'globalResourceType'}}
                                        </ng-template>
                                    </ng-container>
                                    <ng-container *ngSwitchCase="'protection_status'">
                                        <ng-container
                                            *ngIf="getNameLink(item) && getProtectionStatus(item); else elseTemplate">
                                            <aui-status [value]="item.protection_status" type="Protection_Status">
                                            </aui-status>
                                        </ng-container>
                                        <ng-template #elseTemplate>
                                            <span>--</span>
                                        </ng-template>
                                    </ng-container>
                                    <ng-container *ngSwitchCase="'sla_name'">
                                        <span lv-overflow>
                                            <span [ngClass]="{'aui-link': item.sla_id, '': !item.sla_id }" lv-overflow
                                                id='outerClosable' (click)="getSlaDetail(item)" lv-overflow>
                                                <sla-type [name]="item.sla_name"></sla-type>
                                            </span>
                                        </span>
                                    </ng-container>
                                    <ng-container *ngSwitchCase="'sla_compliance'">
                                        <aui-status [value]="item.sla_compliance" type="Sla_Compliance"></aui-status>
                                    </ng-container>
                                    <ng-container *ngSwitchCase="'labelList'">
                                        <ng-container *ngIf="item?.labelList?.length; else emptyTpl">
                                            <lv-tag [ngModel]="item?.showLabelList" [lv-tooltip]="TagTpl"></lv-tag>
                                            <ng-template #TagTpl>
                                                <lv-tag [ngModel]="item?.hoverLabelList"></lv-tag>
                                            </ng-template>
                                        </ng-container>
                                    </ng-container>
                                    <ng-container *ngSwitchDefault>
                                        <span lv-overflow>
                                            {{item[col.key] | nil}}
                                        </span>
                                    </ng-container>
                                </td>
                            </ng-container>
                        </ng-container>
                    </ng-container>
                    <td>
                        <ng-container
                            *ngIf="item.sub_type === dataMap.Resource_Type.LocalFileSystem.value; else eTemplate">
                            <lv-pro-button-group mode="link" [config]="getOptItems(item)" [bindData]="[item]"
                                [maxDisplayItems]="1" [keepDropdown]="true" menuText="{{'common_more_label' | i18n}}">
                            </lv-pro-button-group>
                        </ng-container>
                        <ng-template #eTemplate>
                            <lv-operation-menu [lvItemsFn]="optsCallback" [lvData]="item"></lv-operation-menu>
                        </ng-template>
                    </td>
                </tr>
            </ng-container>
        </tbody>
    </lv-datatable>
    <div class="aui-paginator-wrap">
        <lv-paginator #page [lvPageSizeOptions]="sizeOptions" [lvPageSize]="pageSize" [lvTotal]="total"
            [lvPageIndex]="pageNo" [lvShowPageSizeOptions]="false" (lvPageChange)="pageChange($event)"
            [hidden]="!total">
        </lv-paginator>
    </div>
</div>

<ng-template #slaNameTpl>
    <lv-search [(ngModel)]="slaName" (lvSearch)="searchSlaName($event)"></lv-search>
</ng-template>

<ng-template #emptyTpl>
    --
</ng-template>